import screenfull from 'screenfull'
import { message } from 'antd'
import { useEffect, useState } from 'react'
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons'

export default function FullScreen() {
  console.log('screenfull.isFullscreen', screenfull.isFullscreen)
  const [fullScreen, setFullScreen] = useState(screenfull.isFullscreen)
  const handleFullScreen = () => {
    if (!screenfull.isEnabled) message.warning('当前您的浏览器不支持全屏 ❌')
    screenfull.toggle()
  }

  useEffect(() => {
    screenfull.on('change', () => {
      if (screenfull.isFullscreen) setFullScreen(true)
      else setFullScreen(false)
      return () => screenfull.off('change', () => {})
    })
  }, [])

  return (
    <span onClick={handleFullScreen}>
      {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
    </span>
    //<i className={["icon-style iconfont", fullScreen ? "icon-suoxiao" : "icon-fangda"].join(" ")} onClick={handleFullScreen}></i>
  )
}
